<template>
    <el-dialog v-model="visible" title="系统选项" width="30%" draggable>
        <el-divider content-position="left">
            <span class="divider_item">
                通用显示设置
            </span>
        </el-divider>
        <el-checkbox v-model="disLineWidthRadio" label="显示线宽" size="large" />
        <label for="backColorID" style="position: relative; left:5px;padding-right:10px;font-size: 12px;">
            背景色
        </label>
        <el-color-picker v-model="backColor" show-alpha id="backColorID"> </el-color-picker>
        <el-divider content-position="left">
            <span class="divider_item">
                网格设置
            </span>
        </el-divider>
        <el-radio-group v-model="disGridRadio" class="ml-4">
            <el-radio label=1 size="large">显示</el-radio>
            <el-radio label=0 size="large">隐藏</el-radio>
            <label for="gridSpanInput" style="position: relative; left:5px;padding-right:10px;font-size: 12px;">
                网格间距
            </label>
            <el-input v-model="gridSpan" id="gridSpanInput" autofocus size="mini" :ref="gridSpanInput"
                style="position: relative; left:5px;padding-right:10px;width: 120px;">
            </el-input>
            <label for="gridcolorID" style="position: relative; left:5px;padding-right:10px;font-size: 12px;">
                网格线颜色
            </label>
            <el-color-picker v-model="gridColor" show-alpha id="gridcolorID"> </el-color-picker>
        </el-radio-group>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">关闭</el-button>
                <el-button type="primary" @click="onConfirm">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'

const visible = ref(false)
const mapctrl = ref(null);
const disLineWidthRadio = ref('0')
const disGridRadio = ref('0')
const gridSpan = ref(20)
const gridColor = ref('rgba(128, 128, 128, 1)')
const backColor = ref('rgba(0, 0, 0, 1)')

const getDataFromMem = () => {
    let tINTF = mapctrl.value.m_pGetDataINTF;
    disLineWidthRadio.value = tINTF.getConfigValue('disLineWidth');
    backColor.value = tINTF.getConfigValue('backcolor');
    let gridInfo = tINTF.getConfigValue('grid');
    if (gridInfo) {
        if (gridInfo.dis) {
            disGridRadio.value = '1';
        }
        else {
            disGridRadio.value = '0';
        }
        gridSpan.value = gridInfo.span;
        gridColor.value = gridInfo.color;
    }
}

// 监听visible的变化
watch(visible, (newVal) => {
    if (newVal) {
        console.log('system setting state changed!!!!');
        getDataFromMem();
    }
})

const onConfirm = () => {
    visible.value = false;
    let tINTF = mapctrl.value.m_pConfigINTF;
    tINTF.config("disLineWidth", disLineWidthRadio.value);

    let gridSetaInfo = { dis: disGridRadio.value, span: gridSpan.value, color: gridColor.value };
    tINTF.config("grid", gridSetaInfo);

    tINTF.config("backcolor", backColor.value);
}

defineExpose({
    visible,
    mapctrl
});

</script>
<style>
.divider_item {
    color: blue;
    font-size: 18px;
}
</style>